// import { useEditorStore } from '@/store/useEditorZustand';
import { Hand } from 'lucide-react';
import { Button } from 'antd';
import { useState, useEffect, useRef } from 'react';
import { useMouseMovePosStore } from '@/store/useMouseMovePosStore';

const GlobalDrag = function () {
  // const { editor } = useEditorStore();
  const elementRef = useRef(null);
  // eslint-disable-next-line
  const { setPos, ...rect } = useMouseMovePosStore();
  // console.log(rect, '装填管理器中获取的实时坐标')
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    if (rect && rect.x) {
      const editorElement = document.querySelector('.ProseMirror');

      if (editorElement) {
        setPosition({
          y: window.scrollY + rect.y || 0,
          x: window.scrollX + rect.x || 0,
        });
      }
    }
  }, [rect.x, rect.y, rect]);

  useEffect(() => {
    const handleAnimation = () => {
      if (elementRef.current) {
        // 使用transform可以获得更好的性能y
        elementRef.current.style.transform = `translate(${position.x}px, ${position.y}px)`;
      }
      requestAnimationFrame(handleAnimation);
    };

    const animationId = requestAnimationFrame(handleAnimation);
    return () => cancelAnimationFrame(animationId);
  }, [position.x, position.y]);

  return (
    <Button
      ref={elementRef}
      style={{
        position: 'absolute',
        // transform: `translate(var(--x), var(--y))`,
        // '--x': `${position.x}px`,
        // '--y': `${position.y}px`,
        zIndex: 1000,
      }}
      icon={<Hand className="size-4" />}
      type="text"
    />
  );
};

export default GlobalDrag;
